<template>
    <!-- Navbar -->
    <nav
        class="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex items-center p-4">
        <div class="w-full mx-autp items-center flex justify-between md:flex-nowrap flex-wrap md:px-10 px-4">
            <!-- Brand -->
            <p class="text-white text-sm uppercase hidden lg:inline-block font-semibold">
                <slot name="breadcrumb"/>
            </p>

            <div class="relative flex w-full flex-wrap items-stretch justify-end">
                <!-- Language Select -->
                <select
                    v-model="selectedLang"
                    @change="onLangChange"
                    class="border-0 px-3 py-3 mr-2 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring"
                    style="width: 120px;"
                >
                    <option value="en">English</option>
                    <option value="zh-CN">简体中文</option>
                    <option value="zh-TW">繁體中文</option>
                </select>
            </div>

            <!-- User -->
            <ul class="flex-col md:flex-row list-none items-center hidden md:flex">
                <UserDropdown/>
            </ul>
        </div>
    </nav>
    <!-- End Navbar -->
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { usePage } from '@inertiajs/vue3';
import { useI18n } from 'vue-i18n';
import UserDropdown from "@/Components/Dropdowns/UserDropdown.vue";
import { useForm } from "@inertiajs/vue3";
import { showToast } from "@/Utils/Helper.js";

const { locale } = useI18n();
const selectedLang = ref('en');
const page = usePage();
const form = useForm({
    search: '',
    keyword: null,
});

onMounted(() => {
    selectedLang.value = localStorage.getItem('lang') || page.props.value.locale || 'en';
    locale.value = selectedLang.value;
});

const onLangChange = () => {
    localStorage.setItem('lang', selectedLang.value);
    locale.value = selectedLang.value;
};

const submitSearch = () => {
    form.post(route('search'), {
        preserveScroll: true,
    });
};

const searchProduct = () => {
    form.get(route('carts.index'), {
        preserveScroll: true,
    });
};
 
 

 
</script>
